<template>
  <div id="tabcontrol">
    <ul>
      <li @click="alertClass(index)"  v-for="(item,index) in tabList" :class="{active:index===currentIndex}" :key="item">{{item}}</li>
    </ul>
  </div>
</template>

<script>
export default {
  name: "TabControl",
  props:{
    tabList:{
      type:Array,
      defaults:[]
    }
  },
  data(){
    return{
      currentIndex:0
    }
  },
  methods:{
    alertClass(index){
      let tagName='';
      this.currentIndex=index;
      if (index===0){
        tagName="pop"
      }else if (index===1){
        tagName="new";
      }else {
        tagName="sell";
      }
      this.$emit('tabClick',tagName);
    }
  }
}
</script>

<style scoped>
#tabcontrol{
  position: sticky;
  z-index: 1;
  margin-top: 1px;
  top: 50px;
  width: 100%;
  height: 40px;
  line-height: 40px;
  text-align: center;
  font-size: 17px;
  background-color: #FFFFFF;
}
#tabcontrol ul{
  display: flex;
}
#tabcontrol ul li{
  flex: 1;
  margin: 0 20px;
}

.active{
  color: var(--color-high-text);
  border-bottom: 3px solid  var(--color-high-text);
}
</style>
